<template>
	<view class="applyUp">
		<view v-if="isList">
			<view class="title flex justify-between ">
				
				<view class="title-text">
					<text :style="{color:(params&&params.IsUrgent==0?'#52C41A':'#FAAD14')}" style="padding-right: 30upx;font-weight: bold;">{{ params.whno }}</text>卸货清单
				
				</view>
				<view class="mark-type " v-if="params.IsUrgent==1">
					<text class="text-white mark-type-item" style="background-color: #FAAD14;"  >急</text>
					<!-- <text class="text-white mark-type-item"  style="background-color: #52C41A;" v-else >缓</text> -->
				</view>
			</view>
			<view class="orderList" v-for="(item, index) in orderList" :key="index">
				<view class="oderList-list">
					<view class="oderList-list-oderNum">
						<view>{{ item.InboundOrderNO }}</view>
					</view>
					<view class="oderList-list-param" v-for="(item1, index1) in item.PartList" :key="index1">
						<view>{{ item1.PartNO }}</view>
						<view>{{ item1.HSName }}</view>
						<view>{{ item1.EAQty }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="oderTitle" v-else>暂无预约单号</view>
		<view class="padding flex flex-direction controlBtn">
			<view class="" v-if="params.quno&&params.type!=='reApply'">
				<view class="oderTitle ">预约单号：{{ params.quno }}</view>
				<view class="queuemsg flex justify-center">{{ queuemsg }}</view>
				<view class="flex justify-center margin-top" v-if="res.Data">码头签到时间：	{{timer||'签到时间缺失'}}	</view>
				<view class="flex justify-between"  style="padding: 20px 20px 0 20px;">
					<!-- <button class="cu-btn bg-blue " style="width: 40%;" @click="cancelQueue" v-show="isCancel">取消排队</button> -->
					<button class="cu-btn bg-green " style="width: 100%;" @click="wharfRegister" :disabled="isRegister">码头签到扫描</button>
				</view>
			</view>
			<!-- <view class="" v-else><button class="cu-btn bg-blue lg" @click="AddQueue">预约排队</button></view> -->
		</view>
	</view>
</template>

<script>
	import {checklocation,getLocation} from '@/utils/common.js';
	import moment from 'moment';
	import {
		
		showModal
	} from '@/utils/util.js'
export default {
	data() {
		return {
			isList: true,
			session: {},
			params: {},
			orderList: [],
			isCancel: true,
			isRegister:false,
			queuemsg:'',
			timer:'',
			res:{},
		};
	},
	onLoad(e) {
		this.params = e;
		this.params.IsUrgent=e.IsUrgent;
		console.log('****',this.params,Boolean(this.params.IsUrgent===0))
		this.session = uni.getStorageSync('session');
		var num6 = parseFloat("3.125e7");
	},
	
	mounted() {
		this.session = uni.getStorageSync('session') || {};
		this.getQueueDetail();
		if (this.params.status == 2) {
			this.isCancel = false;
		}
		
		if(this.params.quno){
			this.GetScanPierDate()
		}
	},
	methods: {
		getQueueDetail() {
			uni.showLoading({
			    title: '加载中'
			});
			
			this.$store
				.dispatch('uni/GetQueueDetail', {
					openid: this.session.openid,
					Licenseplateno: this.params.no,
					Trucktransportno: this.params.id,
					WarehouseNO: this.params.whno,
					QueueUpNO: this.params.quno,
					IsUrgent :this.params.IsUrgent,
					QueueUpID:this.params.queneUpId
				})
				.then(res => {
					this.orderList = res.Data.unloadingdetail;
					this.queuemsg=res.Data.queuemsg;
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				});
		},
		GetScanPierDate(){
			this.$store.dispatch('uni/GetScanPierDate',{
				openid:this.session.openid,
				queueUpNO: this.params.quno,
				QueueUpID:this.params.queneUpId
			}).then(res=>{
				this.code=res.Code
				this.res=res
				if(res.Code===0){
					if(res.Data){
						this.isRegister=true
						this.timer=moment(res.Data).format('YYYY-MM-DD  HH:MM')
					}else{
						this.isRegister=false
					}
				}else{
					uni.showToast({
						title:res.Message,
						icon:'none'
					})
				}
			}).catch()
		},
		cancelQueue() {
			uni.showModal({
				title: '取消预约排队',
				content: '是否取消预约排队',
				success: res => {
					if (res.confirm) {
						this.$store
							.dispatch('uni/CancelQueue', {
								QueueUpNO: this.params.quno,
								query: true
							})
							.then(res => {
								const { Message } = res;
								uni.showToast({
									
									title: Message,
									duration: 1500
								});
								uni.navigateBack({
									delta: 1
								});
							});
					} else if (res.cancel) {
					}
				}
			});
		},
		AddQueue() {
			uni.showModal({
				title: '预约排队',
				content: '是否预约排队',
				success: res => {
					if (res.confirm) {
						const _props = {store:this.$store,openid:this.session.openid};
						checklocation(_props);
						const timer = setInterval(() => {
							getLocation(_props);
						}, 10000);
						this.defined.setTimer(timer);
						
						let params={
							OpenID: this.session.openid,
							LicensePlateNO: this.params.no,
							TruckTransportNO: this.params.id,
							WarehouseNO: this.params.whno,
							QueueUpNO: this.params.type=='reApply'?this.params.quno:'',
							IsUrgent :this.params.IsUrgent,
						}
						this.$store
							.dispatch('uni/AddQueue', params)
							.then(res => {
								const { Message,Code } = res;
								
								if(Code==20000){
									console.log('Message,Code ',Message,Code )
									uni.showModal({
										title:'提示',
										content:Message,
										showCancel:false,
										success:v=>{
											if(v.confirm){
												let page="apply"
												uni.navigateTo({
													url:`/pages/home/scanSign?page=${page}`
												})
											}
										}
									})
								}else{
									uni.showToast({
										title: "预约成功",
										duration: 2000
									});
									setTimeout(()=>{
										uni.navigateBack({
											delta: 1
										});
									},2000)
								}
								
							});
					} else if (res.cancel) {
					}
				}
			});
		},
		wharfRegister(){
			let params={}
			params.openid=this.session.openid
			params.queueUpNO=this.params.quno
			// params.query=true
			uni.scanCode({
				success: res => {
					//console.log('res---',res)
					//console.log(typeof res.result)
				//	const ret = JSON.parse(res.result);
					 if( res.result){
						 params.warehouseNO=res.result
						 console.log('params',params)
						this.$store.dispatch('uni/ScanPierQR',params).then(v=>{
							console.log('88888')
							const {Code,Message}=v
							console.log(typeof Code,)
							if(v.Code===0){
								/* uni.showToast({
									title:Message||'码头签到成功'
								}) */
								showModal({
									title:'请求成功',
									content:Message||'码头签到成功'
								})
								this.isRegister=true
								this.getQueueDetail()
								this.GetScanPierDate()
							}
						}).catch((res)=>{
							console.log('error---111',res)
							uni.showToast({
								title:'请求失败',
								icon:'none',
							})
						})
					 }else{
						 uni.showToast({
							 title:'请扫描正确的二维码'
						 })
						 
					 }
					
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.title {
	height: 80upx;
	background-color: #ffffff;
	color: #2a8cf6;
	// margin-bottom: 15upx;
	padding: 0 10px;
	&-text {
		line-height: 80upx;
		// border-bottom: 4upx solid #2a8cf6;
		width: 150px;
		// padding-left: 30upx;
	}
	.mark-type{
		height: 32px;
		width: 32px;
		font-weight: bolder;
		margin: 5px ;
		
		&-item{
			display: inline-block;
			width: 100%;
			height: 100%;
			border-radius: 50px;
			text-align: center;
			line-height: 32px;
		}
		
	}
}
.orderList {
	margin: 15upx 0;
	background-color: #ffffff;
	.oderList-list {
		margin: 20upx 0;
		.oderList-list-oderNum {
			display: flex;
			justify-content: flex-start;
			padding-left: 10upx;
			color: #2a8cf6;
			font-size: 14px;
			padding: 15upx 0 15upx 10upx;
		}
		.oderList-list-param {
			display: flex;
			justify-content: center;
			margin-bottom: 10upx;
			border-bottom: 4upx solid #f4f4f4;
			padding: 15upx 0;
			view {
				flex: 1;
				text-align: center;
				font-size: 14px;
			}
		}
	}
}
.oderTitle {
	font-size: 16px;
	text-align: center;
	height: 100upx;
	line-height: 100upx;
	color: #59C482;
	margin-left: 40upx;

}
.queuemsg{
	color: #DD514C;
	
	
}
.controlBtn button {
	width: 95%;
}
.oderLineUpBtn {
	background-color: #2a8cf6;
	color: #ffffff;
}

/* .oderTitle {
	font-size: 16px;
	text-align: center;
	height: 180upx;
	line-height: 180upx;
	color: #0081FF;
} */
</style>
